<%--
  Created by IntelliJ IDEA.
  User: xiaoyuyu
  Date: 2019/7/2
  Time: 16:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <title>
        超市管理系统
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="./css/x-admin.css" media="all">
    <link rel="stylesheet" href="../../lib/layui/myicon/iconfont.css">
</head>
<body>
<div class="x-nav">
    <span class="layui-breadcrumb">
      <a><cite>首页</cite></a>
      <a><cite>员工管理</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"  href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <form class="layui-form x-center" action="" style="width:50%">
        <div class="layui-form-pane" style="margin-top: 15px;">
            <div class="layui-form-item">
                <div class="layui-input-inline" >
                    <input type="text" id="condition" name="condition"  placeholder="筛选" autocomplete="off" class="layui-input">
                    <input type="text" style="display:none" >
                </div>
                <div class="layui-input-inline" style="width:80px">
                    <button class="layui-btn" id="search" type="button"<%--  lay-submit="" lay-filter="search"--%>><i class="layui-icon">&#xe615;</i></button>
                </div>
            </div>
        </div>
    </form>
    <xblock>
        <button class="layui-btn layui-btn-danger" onclick="batch_delete()"><i class="layui-icon">&#xe640;</i>批量删除</button>
        <button class="layui-btn layui-btn-danger" onclick="export_excel()"><i class="layui-icon"></i>导出EXCEL</button>
        <button class="layui-btn layui-btn-danger" onclick="upload('上传','${pageContext.request.contextPath}/upload_employee.page','600','400')"><i class="layui-icon"></i>EXCEL导入</button>
        <button class="layui-btn" onclick="add_employee('添加','${pageContext.request.contextPath}/add_employee.page','600','400')"><i class="layui-icon">&#xe608;</i>添加</button>
        <span class="x-right" id="total-count" style="line-height:40px">共有数据：88 条</span>
    </xblock>
    <table class="layui-table">
        <thead>
        <tr>
            <th>
                <input type="checkbox" name="" value="" id="choice-all">
            </th>
            <th>
                编码
            </th>
            <th>
                名称
            </th>
            <th>
                性别
            </th>

            <th>
                生日
            </th>
            <th>
                电话
            </th>
            <th>
                住址
            </th>
            <th>
                学历
            </th>
            <th>
                身份证号
            </th>
            <th>
                上岗时间
            </th>
            <th>
                职务
            </th>
            <th>
                用户名
            </th>
            <th>
                密码
            </th>
            <th>
                启用
            </th>
            <th>
                操作
            </th>
        </tr>
        </thead>
        <tbody id="x-link">

        </tbody>
    </table>

    <div id="page"></div>
</div>
<script src="../../lib/layui/layui.js" charset="utf-8">
</script>
<script src="../../js/x-layui.js" charset="utf-8">
</script>
<script src="../../js/jquery.min.js" charset="utf-8"></script>
<script src="../../js/chaoshi.js" charset="utf-8"></script>

<script>
    $(function () {
        refresh_page();
    });

    //每页显示多少数据
    var page_limit = 5;

    function refresh_page(){
        layui.use(['laypage','layer'], function(){
            laypage = layui.laypage;
            layer = layui.layer;
            var current_page = 1;
            //通过筛选条件来更新
            var condition = $("#condition").val();
            var page_data = get_data("${pageContext.request.contextPath}/filtrateEmployee",{"page_number":current_page,"page_limit":page_limit,
                "condition":condition});
            show(page_data);
            laypage({
                cont: 'page'
                ,pages: Math.ceil(page_data.data.count/page_limit)
                ,first: 1
                ,last: Math.ceil(page_data.data.count/page_limit)
                ,prev: '<em><</em>'
                ,next: '<em>></em>'
                ,curr:current_page
                ,jump: function(obj,first){
                    if(!first){
                        current_page = obj.curr;
                        condition = $("#condition").val();
                        var page_data = get_data("${pageContext.request.contextPath}/filtrateEmployee",{"page_number":current_page,"page_limit":page_limit,
                            "condition":condition});
                        show(page_data);
                        // console.log(current_page);
                    }
                }
            });
        });
    }


    //将数据显示到页面
    function show(data) {
        //清理页面
        $("#x-link").replaceWith("<tbody id=\"x-link\"></tbody>");
        //去掉全选勾
        $(".layui-table :checkbox:checked").each(function () {
            this.checked = false;
        });
        //填充总数据
        $("#total-count").replaceWith("<span class=\"x-right\" id=\"total-count\" style=\"line-height:40px\">共有数据："+ data.data.count +" 条</span>");
        //将查询到的数据填充到表格中
        $.each(data.data.data, function (index, obj) {
            // console.log(obj);
            var checked = "";
            if(obj.start_using){
                checked = "checked=\"checked\"";
            }

            //添加列表
            $('#x-link').append("<tr><td><input type=\"checkbox\" value=\""+ obj.id +"\" class=\"choice\"></td><td>"+ obj.id +"</td><td>"+ obj.name +"</td><td>"+ obj.sex +"</td><td>"+ obj.birthday +"</td><td>"+ obj.telephone +"</td><td>"+ obj.address +"</td><td>"+ obj.education +"</td><td>"+ obj.id_number +"</td>" +
                "<td>"+ obj.duty_time +"</td>" +
                "<td>"+ obj.duty +"</td><td>"+ obj.username +"</td><td>******</td><td><input type=\"checkbox\" "+ checked +"  disabled value=\""+ obj.start_using +"\" name=\"\"></td><td class=\"td-manage\"><a style=\"text-decoration:none\"  onclick=\"edit_employee('"+ obj.username +"','修改','${pageContext.request.contextPath}/edit_employee.page','600','400')\"\n" +
                "                   href=\"javascript:;\" title=\"修改\"><i class=\"layui-icon\">&#xe642;</i></a><a title=\"删除\" href=\"javascript:;\" onclick=\"delete_one('"+ obj.id +"')\"\n" +
                "                   style=\"text-decoration:none\"><i class=\"layui-icon\">&#xe640;</i></a></td></tr>");


        });
    }

    //条件筛选
    $("#search").click(function () {
        refresh_page();
    });

    //保存被编辑的员工的用户名
    var username = "";
    function edit_employee(_username,title,url,w,h) {
        username = _username;
        x_admin_show(title,url,w,h);

    }
    //添加员工资料
    function add_employee(title,url,w,h){
        x_admin_show(title,url,w,h);
    }

    //全选
    $("#choice-all").click(function () {
        var checks = $(".choice");
        var c = this;
        checks.each(function () {
            if (c.checked){
                this.checked = true;
            }else {
                this.checked = false;
            }
        });
    });

    //批量删除
    function batch_delete() {
        layer.confirm('确认要删除吗？',function () {
            //收集登录名
            var checks = $(".choice:checked");
            var list = [];
            checks.each(function () {
                list.push(Number(this.value));
            });
            console.log(list);
            //提交
            $.ajax({
                type:"POST",
                url:"${pageContext.request.contextPath}/deleteEmployee",
                data: JSON.stringify(list),
                dataType: 'json',
                contentType: 'application/json',

                success:function (data) {
                    if(data.code == "1"){
                        layer.alert("删除成功", {icon: 6});
                    }else{
                        layer.alert("删除失败", {icon: 5});
                    }
                    // location.reload(location.href);
                    refresh_page();
                }
            });
        });

    }
    
    //删除单个
    function delete_one(id) {
        layer.confirm('确认要删除吗？',function () {
            var list = [];
            list.push(Number(id));
            console.log(list);
            //提交
            $.ajax({
                type:"POST",
                url:"${pageContext.request.contextPath}/deleteEmployee",
                data: JSON.stringify(list),
                dataType: 'json',
                contentType: 'application/json',

                success:function (data) {
                    console.log(data);
                    if(data.code == "1"){
                        layer.alert("删除成功", {icon: 6});
                    }else{
                        layer.alert("删除失败", {icon: 5});
                    }
                    // location.reload(location.href);
                    refresh_page();
                }
            });
        });

    }
    
    //导出EXCEL
    function export_excel() {
        location.href="${pageContext.request.contextPath}/exportEmpoloyeeExcel";
    }

    //打开上传页面
    function upload(title,url,w,h){
        x_admin_show(title,url,w,h);
    }




</script>

</body>
</html>
